<template>
    <div class="writeArticle-main">
        <div class="writeContent" v-show="!judge && !detail">
            <span @click="backMenu"><img src="../../assets/img/zuo.png" alt="" style="width:18px;"></span>
            <span><span>寫文章</span></span>
        </div>
        <div v-show="!judge && !detail" style="position:relative;" :style="styleHeight">
            <img src="../../assets/img/del.png" class="delImg" v-if="imgUrl"  @click="removeCover" alt="">
            <div class="coverImg" @click="callBounced">
                <div style="position: relative;">
                    <img :src="imgUrl" alt="" v-if="imgUrl">
                </div>
                <div class="hint" v-if="!imgUrl && !judgeImg">
                    <img src="../../assets/img/fb.png" alt="" class="coverPicture">
                    <p class="commonColor" style="font-size: 18px;">選擇封面圖片</p>
                </div>
                <div class="uploading" v-if="judgeImg">
                    <img src="../../assets/loading.gif" alt="" style="width:20px;">
                    <p class="commonColor" style="font-size: 12px;">图片正在上传</p>
                </div>
            </div>
            <div class="articleTitle"><span class="commonColor title">標題</span><input type="text" v-model="title" class="content"></div>
            <div class="articleTitle" style="overflow: auto;">
                <span class="articleTitleSpan commonColor" style="float: left;">正文內容</span>
                <span class="textContent commonColor">{{textareaContent}}</span>
                <span class="editingBody commonColor" @click="clickFocus">編輯</span>
            </div>
            <!-- <div class="writeTit" @click="editUploadPictures" v-if="false">
                <span>上传图片</span>
            </div> -->
            <div class="previewpublished">
                <span class="commonColor" @click="previewFn">預覽</span>
                <span class="commonColor" @click="publishArticleApproach">發表</span>
            </div>
        </div>
        <div class="writeBox" v-show="judge && !detail">
            <!-- <div id="test_box" contenteditable="true" style="font-size:.24rem;" ref="testBox" class="cursorPosition" @click="cursorPosition"></div>  -->
            <div class="writeContent">
                <span @click="judge=false;detail=false"><div class="accomplish" v-if="textareaContent">完成</div><img v-if="!textareaContent" src="../../assets/img/zuo.png" alt="" style="width:18px;"></span>
                <span><span>寫文章</span></span>
                <span v-if="false"><img src="../../assets/img/baocun1.png" alt="" style="width:17px;"></span>
                <span v-if="false"><img src="../../assets/img/tianjia1.png" alt="" style="width:20px;"></span>
            </div>
            <div class="articleTitle"><span class="commonColor">正文內容</span></div>
            <textarea id="test_box" v-model="textareaContent"></textarea>
        </div>
        <div class="detail" v-if="detail">
            <div class="writeContent">
                <span @click="judge=false;detail=false"><img src="../../assets/img/zuo.png" alt="" style="width:18px;"></span>
                <span><span>預覽</span></span>
            </div>
            <div class="imgBoxDiv">
                <div class="nameBox focusDw">
                    <p class="fl pOne">
                        <img :src="userInfo.imagePath?userInfo.imagePath:$defaultSetting.defaultPortrait" alt="">
                    </p>
                    <p class="fl ptt">
                        <font class="provenance fontSize22 color717070">
                        <em class="fl color000">{{userInfo.nickname}}</em>
                        <img class="fl" v-if="userInfo.status == 1" src="../../assets/img/v.png" width="20" />
                        <em class="fl">{{userInfo.certName}}</em> 
                        </font>
                    </p>
                </div>
                <div class="focusContent fontSize28 ">
                    {{title}}
                </div>
                <div class="pubTypeTwo">
                    <img :src="imgUrl" alt="">
                </div>
                <div class="focusContent fontSize28" v-html="textareaContent"></div>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import apiCircle from '../../api/circle'
export default {
    name: 'writeArticleMain',
    data(){
        return{
            title: '',
            imgUrl: '',
            textareaContent: '',
            userData: '',
            judge: false,
            detail: false,
            userInfo: '',
            judgeImg: false,
            styleHeight: 'height:' + (document.body.clientHeight - 40) + 'px'
        }
    },
    
    mounted () {
        window.receptionMessage = this.receptionMessage
        window.publishArticle = this.publishArticle
    },
    methods:{
        // 页面一加载就需要把参数传递回来
        publishArticle (data) {
            this.userData = JSON.parse(data)
            this.getUser(this.userData.pubUserId)
         },
        // 点击调用app的弹框
        callBounced () {
            if (this.imgUrl === '')
                if(this.$isAndroid){
                    window.android.showPopupWindow()
                }else if(this.$isiOS){
                    window.webkit.messageHandlers.showPopupWindow.postMessage('')
                }  
        },
        // 返回首页菜单
        backMenu () {
            if(this.$isAndroid){
                window.android.back()
            }else if(this.$isiOS){
                window.webkit.messageHandlers.back.postMessage('')
            } 
        },
        // 给app调用接收app的数据
        receptionMessage (data) {
            this.judgeImg = true
            this.insertImg(data)
        },
        // 查询个人信息
        getUser(queryId){
            apiCircle.userList({id:queryId}).then(data=>{
                if(data.body.returnMsg == 'success'){
                this.userInfo = data.body.data
                }
            })
        },
        // 预览方法
        previewFn () {
            if (this.imgUrl !== '') {
                if (this.title !== '') {
                    if (this.textareaContent !== '') {
                        this.detail = true
                    } else {
                        Toast('内容不能为空');
                    }
                } else {
                    Toast('标题不能为空');
                }
            } else {
                Toast('封面图片不能为空');
            }
        },
        // 图片上传
        insertImg(el){
            var data = {
		        	"imageName":new Date().getTime(),//名称
		        	"imageSuffix":'png',//类型
		        	"imageData":el,//base64编码
		        	"operator":"admin",//上传者名称
		        	"watermark":false,//是否加水印加 ：true 不加：false
		        };
            apiCircle.upload(data).then(data => {
                if(data.body.returnMsg == 'success'){
                    //     let testBox = document.getElementById('test_box')
                    //     testBox.innerHTML = testBox.innerHTML + '<img src="'+data.body.data+'">'
                    //     setTimeout(() => {
                    //         this.editDown()
                    //     }, 100);
                        this.imgUrl = data.body.data
                        this.judgeImg = false
                }
            })
        },
        // 编辑上传图片的方法
        editUploadPictures () {
            this.callBounced()
        },
        // 点击内容获取光标
        clickFocus () {
            document.getElementById('test_box').style.height = document.body.clientHeight - 95 + 'px'
            this.judge = true
            this.detail = false
        },
        // 输入置底功能
        editDown () {
            var writeArticle = document.getElementsByClassName('writeArticle-main')[0]
            writeArticle.scrollTop = writeArticle.scrollHeight
        },
        // 移除封面图片方法
        removeCover () {
            apiCircle.deletePicture({url: this.imgUrl, type:0}).then(data => {
                if(data.body.returnMsg == 'success'){
                   this.imgUrl = '' 
                }
            })
        },
        // 发布文章接口
        publishArticleApproach () {
            if (this.imgUrl !== '') {
                if (this.title !== '') {
                    if (this.textareaContent !== '') {
                        let data = {
                            'pubUserId':this.userData.pubUserId,  //  当前用户id
                            'pubUserType':this.userData.pubUserType,  //  用户类型
                            'pubType': 2,  //  发布的类型
                            'dynamicType': 1,  //  动态类型
                            'content':this.textareaContent,   //  内容
                            'contentImage':this.imgUrl,  //  封面图片
                            'title':this.title,  //  标题
                            'status':1  //   状态  0：草稿 1:发布
                        }
                        apiCircle.publishArticle(data).then(data => {
                            if(data.body.returnMsg == 'success'){
                                if(this.$isAndroid){
                                    window.android.toSpaceView()
                                }else if(this.$isiOS){
                                    window.webkit.messageHandlers.toSpaceView.postMessage('')
                                }
                            }
                        })
                    } else {
                        Toast('内容不能为空');
                    }
                } else {
                    Toast('标题不能为空');
                }
            } else {
                Toast('封面图片不能为空');
            }
        }
    }
}
</script>
<style scoped>
    .commonColor{
        color: #B2B2B2;
    }
    .coverImg{
        border-bottom: 1px solid #eee;
        min-height: 4rem;
        width: 100%;
        position: relative;
    }
    .coverImg input {
        width: 100%;
        height: 100%;
        position: absolute;
        opacity: 0;
        top: 0;
        z-index: 1;
    }
    .delImg{
        width: 30px;
        position: absolute;
        right: 20px;
        top: 25px;
        z-index: 10;
    }
    .coverImg .hint{
        position: absolute;
        left: calc(50% - 54px);
        top: 25%;
        color: #888;
        font-size: 19px;
    }
    .coverImg .hint .coverPicture {
        width: 70px;
        height: 60px;
        margin-left: 17px;
    }
    .coverImg .uploading {
        width: 100px;
        text-align: center;
        position: absolute;
        transform: translateX(-50%);
        margin-left: 50%;
        margin-top: 20%;
    }
    .writeTit{
        border-bottom:solid .01rem #eee;
        text-align: center;
    }
    .writeTit span{
        padding: .1rem .1rem;
        line-height: .4rem;
        display: inline-block;
    }
    .articleTitle{
        padding: 10px 5px 10px 20px;
        border-bottom: 1px solid #eee;
    }
    .articleTitle .textContent{
        display: inline-block;
        margin-left:10%;
        color:#000;
        width: 30%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
    }
    .articleTitle span{
        font-size: 18px;
    }
    .articleTitle .title {
        margin-right:15px;
    }
    .articleTitle input.content{
        font-size: 18px;
    }
    .articleTitle .editingBody{
        font-size: 16px;
        border: 1px solid #B2B2B2;
        padding: 1px 8px;
        border-radius: 5px;
        margin-right: 20px;
        float: right;
    }
    .articleTitleSpan {
        font-size: 18px;
    }
    .articleTitle input{
        font-size: 15px;
        width: 80%;
        height: 25px;
    }
    .previewpublished {
        padding: 0 10%;
        width: 100%;
        box-sizing: border-box;
        position: absolute;
        bottom: 6%;
    }
    .previewpublished span{
        width: 43%;
        display: inline-block;
        border: 1px solid #eee;
        border-radius: 20px;
        font-size: 18px;
        line-height: 38px;
        text-align: center;
    }
    .previewpublished span:nth-child(1){
        margin-right:10%;
    }
    input{
        border: none;
    }
    #test_box{
        min-height: 2rem;
        padding: .1rem .4rem;
        border: none;
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
    }
    #fileInput{
        float: left;
        z-index: 10;
        width: 2rem;
        border: none;
        height: .5rem;
        background: none;
    }
    .writeContent{
        border-bottom: 1px solid  #eee;
        padding:8px 0;
    }
    .writeContent span{
        display: inline-block;
    }
    .writeContent .accomplish {
        font-size: 17px;
        color:red;
        margin-left: 20px;
    }
    .writeContent span:nth-child(1){
        width: 20%;
    }
    .writeContent span:nth-child(2){
        width: 50%;
    }
    .writeContent span:nth-child(2) span{
            display: block;
            width: 35%;
            margin-left: 45%;
            font-size: 17px;
    }
    .writeContent span:nth-child(3){
        width: 15%;
    }
    .writeContent span img {
        margin-left: 20%;
    }
    .writeContent span:nth-child(4){
        width: 12%;
    }
</style>

